<style>
.pure_table_course { width: 750px; margin-top: 5px; }
.pure_table_course th { height: 25px; line-height: 25px; }
.pure_table_course img { cursor: pointer; margin-right: 2px; }
.pure_table_course td { vertical-align: middle; }
.pure-button-course { color: #fff !important; background: rgb(223, 117, 20) !important; }
</style>

<?php 
$student_id = Utils::get_param('id', 0);

$opts = new stdClass();
$opts->cd = 't.student_id = :v1';
$opts->cdv = array(':v1' => $student_id);
$mycourses = $orm->get('pb_colg_enrolled_class', 't.course_name', 'ASC', NULL, NULL, $opts)->d;

$allcourses = $orm->get('pb_colg_course', 't.code', 'ASC', NULL, NULL, NULL)->d;

?>

<table class="pure-table pure_table_course" cellpadding=0 cellspacing=0>
  <thead id="course_head">
    <tr>
      <th class="ui-widget-header">Study in NZIOS</th>
      <th style="width: 60px;" class="ui-widget-header">Result</th>
      <th style="width: 60px;" class="ui-widget-header"></th>
    </tr>
  </thead>
  <tbody id="course_body"></tbody>
</table>

<div>&nbsp;</div>
<h3>Cross Credit</h3>
<div class="pure-form">
  <select id="cc_select"></select>
  <input id="cc_result" type="text" placeholder="{CC, A, B, C, D...}">&nbsp;
  <button class="pure-button pure-button-course" onclick="add_cc();">Add</button>
</div>
<table class="pure-table pure_table_course" cellpadding=0 cellspacing=0>
  <thead id="course_cc_head">
    <tr>
      <th class="ui-widget-header">Study elsewhere</th>
      <th style="width: 60px;" class="ui-widget-header">Result</th>
      <th style="width: 60px;" class="ui-widget-header"></th>
    </tr>
  </thead>
  <tbody id="course_cc_body"></tbody>
</table>

<script type="text/javascript">
  /*<![CDATA[*/
  var __mycourses = JSON.parse('<?php echo addslashes(json_encode($mycourses)); ?>');
  var __allcourses = JSON.parse('<?php echo addslashes(json_encode($allcourses)); ?>');

  $(function() {
    if (__user.role == 'Admin' || __user.role == 'Mgmt') {
      $('#cc_select').parent().show();
      for (var idx in __allcourses) {
        var itm = __allcourses[idx];
        $('#cc_select').append('<option value="' + itm.id + '">' + itm.code + ' ' + itm.name + '</option>');
      }
    } else {
      $('#cc_select').parent().hide();
    }
  });

  function add_cc() {
    var obj = Utils.get_by_id($('#cc_select :selected').val(), __allcourses);
    var req = {
      student_id: __data[0].id,
      course_id: obj.id,
      course_name: obj.code + ' ' + obj.name,
      status: 1,
      result2__: $('#cc_result').val()
    };
    Ajax.request(
      __requrl + 'submit_enrl_class2',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        location.reload();
      },
      null
    );
  };

  function delete_cc(id) {
    var req = {
      id: id
    };
    Ajax.request(
      __requrl + 'delete_enrl_class',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        location.reload();
      },
      { confirm: 1 }
    );
  };
  
  function render_courses() {
    $('#course_body').empty();
    var count = 0;
    for (var idx in __mycourses) {
      var itm = __mycourses[idx];
      if (itm.enrolled_program_id == 0) {
        continue;
      }
      $('#course_body').append(
        '<tr class="' + ((idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd') + '">' + 
          '<td>' + itm.course_name + '</td>' +
          '<td>' + status_to_text(itm.status) + '</td>' +
          '<td>&nbsp;</td>' +
        '</tr>'
      );
      count++;
    }
    if (count == 0) {
      $('#course_body').append('<tr class="pure-table-even"><td colspan=' + $('#course_head').children('th').length + '>None</td></tr>');
    }

    $('#course_cc_body').empty();
    var count = 0;
    for (var idx in __mycourses) {
      var itm = __mycourses[idx];
      if (itm.enrolled_program_id != 0) {
        continue;
      }
      $('#course_cc_body').append(
        '<tr class="' + ((idx % 2 == 0) ? 'pure-table-even' : 'pure-table-odd') + '">' + 
          '<td>' + itm.course_name + '</td>' +
          '<td>' + itm.result2__ + '</td>' +
          '<td>' + ((__user.role == 'Admin' || __user.role == 'Mgmt') ? '<i class="fa fa-times" onclick="delete_cc(\'' + itm.id + '\');"></i>' : '') + '</td>' +
        '</tr>'
      );
      count++;
    }
    if (count == 0) {
      $('#course_cc_body').append('<tr class="pure-table-even"><td colspan=' + $('#course_cc_body').children('th').length + '>None</td></tr>');
    }
  };

  function status_to_text(status) {
    if (status == 0) {
      return 'Studying';
    } else if (status == 1) {
      return 'Passed';
    } else if (status == 2) {
      return 'Failed';
    } else if (status == 3) {
      return 'Withdrawn';
    }
  }
  /*]]>*/
</script>